<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"

      th:replace="layout/base :: layout(~{::title}, ~{::main})">
<head>
    <title th:text="${article.title + ' - 博客系统'}">文章标题 - 博客系统</title>
</head>
<body>
    <main>
        <article class="mb-5">
            <div sec:authorize="isAuthenticated()" class="alert alert-info">
                当前用户：<span sec:authentication="name"></span>
                角色：<span sec:authentication="authorities"></span>
            </div>
            <header class="mb-4">
                <h1 th:text="${article.title}">文章标题</h1>
                <div class="article-meta mb-2">
                    <span th:text="${article.authorName}">作者</span> •
                    <span th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                </div>
                <div class="mb-3">
                    <span th:each="tag : ${article.tags}" 
                          class="badge bg-secondary tag-badge" 
                          th:text="${tag}">标签</span>
                </div>
            </header>
            <div class="article-content" th:utext="${article.content}">
                文章内容
            </div>
        </article>

        <section class="comment-section">
            <h3>评论 (<span th:text="${article.commentCount}">0</span>)</h3>
            
            <form sec:authorize="isAuthenticated()"
                  class="comment-form mb-4" 
                  id="commentForm">
                <div class="mb-3">
                    <textarea class="form-control" 
                             id="commentContent" 
                             rows="3" 
                             placeholder="写下你的评论..."
                             required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>

            <div sec:authorize="!isAuthenticated()" 
                 class="alert alert-info mb-4">
                请<a href="/login">登录</a>后发表评论
            </div>

            <div id="commentList">
                <div th:each="comment : ${comments}" 
                     class="comment card mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <div class="article-meta">
                                <span th:text="${comment.authorName}">评论者</span> •
                                <span th:text="${#temporals.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}">评论时间</span>
                            </div>
                            <div sec:authorize="isAuthenticated()" 
                                 th:if="${#authentication.principal.id == comment.authorId || 
                                        #authentication.principal.id == article.authorId}">
                                <button class="btn btn-sm btn-danger"
                                        th:onclick="'deleteComment(' + ${comment.id} + ')'">
                                    删除
                                </button>
                            </div>
                        </div>
                        <div class="comment-content" th:text="${comment.content}">
                            评论内容
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页导航 -->
            <nav th:if="${commentsPage.totalPages > 1}" 
                 class="mt-4" 
                 aria-label="评论分页">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${commentsPage.first} ? 'disabled'">
                        <a class="page-link" 
                           th:href="@{'/article/' + ${article.id} + '?page=' + ${currentPage - 1}}">
                            上一页
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${commentsPage.last} ? 'disabled'">
                        <a class="page-link" 
                           th:href="@{'/article/' + ${article.id} + '?page=' + ${currentPage + 1}}">
                            下一页
                        </a>
                    </li>
                </ul>
            </nav>
        </section>

        <script src="/js/auth.js"></script>
        <script th:inline="javascript">
            const articleId = /*[[${article.id}]]*/ null;
            const currentUser = /*[[${#authentication.principal != 'anonymousUser' ? #authentication.principal.id : null}]]*/ null;

            // 发表评论
            document.getElementById('commentForm')?.addEventListener('submit', function(e) {
                e.preventDefault();
                const content = document.getElementById('commentContent').value;
                
                fetch('/api/comments', {
                    method: 'POST',
                    headers: Object.assign({
                        'Content-Type': 'application/json'
                    }, addAuthHeader()),
                    body: JSON.stringify({
                        content: content,
                        articleId: articleId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        window.location.reload();
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('发表评论失败');
                });
            });

            // 删除评论
            function deleteComment(commentId) {
                if (!confirm('确定要删除这条评论吗？')) {
                    return;
                }

                fetch(`/api/comments/${commentId}`, {
                    method: 'DELETE',
                    headers: addAuthHeader()
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        window.location.reload();
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除评论失败');
                });
            }
        </script>
    </main>
</body>
</html> 